<template>
  <el-container id="Home">
    <!-- 头部 -->
    <Header></Header>
    

    <!-- 中间侧边栏和主体部分 -->
      <el-container>
      <!-- 侧边栏 -->
      <Aside></Aside>

      <!-- 主体部分 -->
      <Main></Main>
    </el-container>
  </el-container>
</template>

<script>
// 组件
import Header from './Header'
import Aside from './Aside';
import Main from './Main';
// 组件结束

export default {
  methods: {},
  components: {
    Header,
    Aside,
    Main
  }
}
</script>

<style lang="scss" scoped>
#Home {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  &::before { // 背景图片
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('~@/assets/img/dragonBallZ.jpg');
  background-size:100% auto;
  background-repeat:no-repeat;
  opacity: 0.2;
  z-index: -999;
  }
}

</style>